import React, { Component } from 'react'
import {
    Text,
    View,
    StyleSheet,
    Image,
    TouchableOpacity,
    StatusBar,
    DeviceEventEmitter
} from 'react-native'

const mine        = require('../../../assets/tab/kaguanjia.png')
const mine_active = require('../../../assets/tab/kaguanjia1.png')

import { pageWidth } from 'src/constants'
import CardTabView from '../components/CardTabView'
import navigationhelper from "src/components/navigationhelper"
import {isIPhoneX} from "src/util"
import {inject} from "mobx-react/native"
import Layer from "src/components/Layer"

@inject('userAuth')
export default class CardManager extends Component<{}> {
    static navigationOptions = ({ navigation, screenProps }) => ({
        header:null,
        gesturesEnabled: true,
        tabBarVisible: true,
        tabBarIcon: (({ tintColor, focused }) => {
            return (
                <Image
                    source={!focused ? mine : mine_active}
                    style={{resizeMode: 'stretch'}}
                />
            )
        }),
        tabBarLabel: '卡管家'
    })

    constructor (props) {
        super(props)
       
    }

    render() {
        return (
            <View style={styles.container}>
                {this.renderTopView()}
                <CardTabView />
            </View>
        )
    }
    renderTopView = () => {
        return (
            <View style={styles.topContainer}>
                <StatusBar  hidden={false} translucent={true} />
                <View style={styles.hContainer} >
                    <Text style={styles.topLabel}>{'卡管家'}</Text>
                    <View style={{ flex: 1 }} />
                    {/* <TouchableOpacity
                        style={{ padding: 6 }}
                        onPress={()=>{
                            navigationhelper.push('MySystemNotice')
                       }}>
                        <Image source={require('src/assets/mine/notification.png')} />
                    </TouchableOpacity> */}
                    <TouchableOpacity
                        style={{ padding: 6 }}
                        onPress={()=>{
                            if(this.props.userAuth.currentUser.real_name_status === 1){
                                navigationhelper.navigate('AddCardView')
                            }else {
                                Layer.showMsg('请实名认证后再来')
                            }
                        }}>
                        <Image source={require('src/assets/cardManager/icon_add.png')} />
                    </TouchableOpacity>
                </View>
                <Text style={styles.topTip}>{'制定您的还款计划'}</Text>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        // backgroundColor:'white'
    },
    hContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    ground:{
        width: pageWidth,
        height: (730 * pageWidth) / 750
    },
    shadowAndroid:{
        width: pageWidth,
        flex:1,
        backgroundColor:'rgb(244,243,247)'
    },
    shadowIos:{
        width: pageWidth,
        height:100,
        transform: [
            {translateY: -20}
        ],
        backgroundColor:'white',
        shadowColor:'white',
        shadowOffset:{
            width: 0,
            height: -40
        },
        shadowOpacity:1,
        shadowRadius:20
    },
    willLogin:{
        alignSelf: "center",
        position:'absolute',
        bottom:20
    },
    edition:{
        color:'gray',
        fontSize:12,
    },
    topContainer: {
        width: pageWidth,
        // height: pageWidth / 750 * 244,
        backgroundColor: '#FF4141',
        paddingTop: isIPhoneX() ? 50 : 30,
        paddingLeft: 16,
        paddingBottom: 13,
        paddingRight: 14
    },
    topLabel: {
        fontSize: 27,
        lineHeight: 38,
        fontWeight: 'bold',
        color: 'white'
    },
    topTip: {
        fontSize: 12,
        lineHeight: 17,
        color: 'white',
    }
})